<template>
  <div class="myself">
    <div class="myself-msg">
      <div class="myself-title">
        <div class="myself-time">
          <span>您好,欢迎回来!</span>
        </div>
        <div class="myself-username">
          <span>{{userInfo.nickName}}</span>
        </div>
      </div>
      <div class="myself-usericon">
        <div class="usericon" >
          <img :src="userInfo.userImg" class="autoImg" />
          <div class="up-usericon">
            <van-uploader :max-size="500 * 1024" :after-read="onOversize" />
          </div>
        </div>
      </div>
    </div>
      <div class="myself-list">
          <van-cell icon="cash-on-deliver"  title="我的订单" is-link to="Order" />
          <van-cell icon="location-o"  title="地址管理" is-link to="AddressList" />
          <van-cell icon="idcard"  title="我的收藏" is-link to="Collection" />
          <van-cell icon="setting-o"  title="设置" is-link to="SetUp" />
      </div>
  </div>
</template>

<script>
import "../assets/less/myself.less";
export default {
  name:"Myself",
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    this.getUserInfo();  
  },
  methods: {
    getUserInfo() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getUserInfo ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (res.data.code === "B001") {
            this.userInfo = res.data.result[0];
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    onOversize(file) {
      let types = ["png", "gif", "jpg", "jpeg"];

      let type = file.file.type.split("/")[1];

      if (types.indexOf(type) === -1) {
        return this.$toast({
          message: `文件类型只支持${type.join(",")}`,
          forbidClick: true,
          duration: 3000,
        });
      }

      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseUrl + "/updateAvatar",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((res) => {
          console.log("res uploadAvatar ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "H001") {
            if (res.data.result[0] === 1) {
              this.userInfo.userImg = res.data.userImg;
            }
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==>", err);
        });
    },
  },
};
</script>
